<template>
    <div class="rootSetBG">
        <div class="rootSet">
            <p class="rootSetTittle">{{ UserName }}</p>
            <el-input v-model="username" :prefix-icon="User" class="el_input" placeholder="请输入修改用户名,不修改请留空"></el-input>
            <el-input v-model="password" :prefix-icon="Lock" class="el_input" placeholder="请输入修改密码,不修改请留空"></el-input>
            <el-input v-model="enpassword" :prefix-icon="Lock" class="el_input"
                placeholder="请再次输入修改密码,不修改请留空"></el-input>
            <el-button @click="changeUser" type="primary" class="el_button_primary">确定</el-button>
        </div>

    </div>
</template>

<script setup lang='js' name=''>
import { inject, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import showMessage from '@/utils/showMessage';
import changeUserNameAPI from '@/api/main/RootSetting/changeUserName';
import changeUserPasswdAPI from '@/api/main/RootSetting/changeUserPasswd';
import router from '@/router';
const UserName = inject("UserName")
const username = ref("")
const password = ref("")
const enpassword = ref("")
async function changeUser() {
    if (check(username.value)) {
        const res = await changeUserNameAPI(localStorage.getItem("SLZKUserID"), username.value)
        if (res.data.code == 200) {
            showMessage(res.data.msg, "success")
            localStorage.setItem("SLZKName", username.value)
            UserName.value = username.value
            username.value = ""
        } else {
            console.log(res)
            showMessage("修改失败,请查看控制台报错信息")
        }
    }
    if (check(password.value) && password.value == enpassword.value) {
        const res = await changeUserPasswdAPI(localStorage.getItem("SLZKUserID"), password.value, password.value)
        if (res.data.code == 200) {
            showMessage("修改成功,请重新登录", "success")
            password.value = ""
            enpassword.value = ""
            localStorage.removeItem("SLZKLoginFlag")
            localStorage.removeItem("SLZKName")
            localStorage.removeItem("SLZKUserID")
            router.push("/login")
        } else {
            // console.log(res)
            showMessage("修改失败," + res.data.msg)
        }
    }
}
function check(mess) {
    if (typeof mess === 'string') {
        mess = mess.trim();
    }
    if (typeof mess === 'string' && mess !== "") {
        return true;
    } else {
        return false;
    }
}
</script>

<style scoped>
.rootSetBG {
    width: 100%;
    height: 100%;
    position: relative;
}

.rootSet {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.rootSet>* {
    width: 100%;
}

.rootSetTittle {
    font-size: 20px;
    font-weight: bold;
    transition: all 0.5s;
    color: var(--PuserSettingColor);
}
</style>